<template>
  <div class="shop">
    <loading :show="loading" />
    <div class="form" v-if="!id">
      <div class="tips">
        <div>请输入后台登录帐号与密码</div>
      </div>
      <div class="item">
        <div class="left">
          <div>用户名:</div>
        </div>
        <div class="right">
          <input type="text" v-model="username" />
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div>密码:</div>
        </div>
        <div class="right">
          <input type="password" v-model="password"/>
        </div>
      </div>
      <div class="submit">
        <cube-button @click="login" primary>登录</cube-button>
      </div>
    </div>
    <div class="image" v-if="id">
      <img :src="url" />
      <div>请扫码支付</div>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="image">
          扫码支付
        </div>
        <div class="desc">
          <div class="text">操作时间: {{item.update_time}}</div>
          <div class="text">订单号: {{item.sn}}</div>
          <div class="text">金额: {{item.total_pay}}</div>
          <div class="text color">状态: {{ item.status === 0 ? '待支付' : '已完成' }}</div>
        </div>
      </div>
    </div>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
import { mapGetters } from 'vuex'
export default {
  name: 'Shop',
  components: {
    Loading,
    PullUp
  },
  computed: {
    ...mapGetters({
      id: 'ExecUser/shop_id',
      url: 'ExecUser/shop_url',
    })
  },
  data() {
    return {
      loading: false,
      username: '',
      password: '',
      list: [],
      queryList: {}
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.id) {
        if (this.queryList.busy === false) {
          this.queryList.page++
          this.loading = true
          this.queryList.busy = true
          api.Supplier.shopOrder({
            merchant_id: this.id,
            ...this.queryList
          }).then(response => {
            let { data } = response
            data = base64.parse(data)
            if (data.list.length === 0) {
              this.queryList.busy = true
            } else {
              this.queryList.busy = false
              if (append) {
                this.list = this.list.concat(data.list)
              } else {
                this.list = data.list
              }
            }
            // console.log(this.list)
          }).finally(() => {
            this.loading = false
          })
        }
      }
    },
    login() {
      if (!this.username || !this.password) {
        return this.$createToast({
          type: 'error',
          time: 1000,
          txt: '请填写完成',
        }).show()
      }
      api.Supplier.shopLogin({
        username: this.username,
        password: this.password
      }).then((response) => {
        return this.$createToast({
          type: 'correct',
          time: 500,
          txt: '登录成功',
          onTimeout: () => {
            const { data } = response
            this.$store.dispatch('ExecUser/shop', data.id).then(() => {
              this.init()
              this.getList()
            })
            this.$store.dispatch('ExecUser/shopUrl', data.url)
          }
        }).show()
      })
    }
  },
  created () {
    this.init()
    this.getList()
  },
  activated() {
    this.init()
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
.shop
  padding 10px
  .form
    background white
    padding 10px
    border-radius 10px
    .tips
      margin-top 25px
      div
        color red
        //text-align left
        //display block
        margin-bottom 10px
    .item
      display flex
      justify-content center
      align-items center
      padding 0 12px
      margin-bottom 15px
      .left
        width 75px
        text-align right
        padding-right 10px
      .right
        flex 1
        text-align left
        input
          border 1px solid #ccc
          height 30px
          line-height 30px
          border-radius 5px
          padding 0 10px
    .submit
      margin-top 25px
  .image
    padding 20px
    background white
    display flex
    flex-direction column
    div
      height 30px
      line-height 30px
  .list
    margin-top 10px
    //padding 20px
    //background white
    .item
      display flex
      background white
      padding 10px
      border-radius 5px
      margin-bottom 10px
      display flex
      .image
        width 90px
        padding 10px
        display flex
        justify-content center
        align-items center
        color red
        font-weight 700
      .desc
        flex 1
        display flex
        flex-direction column
        justify-content space-around
        align-items start
        .text
          color #333
          line-height 20px
          &.color
            color red
</style>
